<script>
export default {
  name: 'People'
}
</script>
<script setup>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { ref, onMounted } from 'vue'

const { height } = defineProps(['height'])

const otherText = ref('216908人')

const chart = ref()

onMounted(() => {
  const myEcharts = echarts.init(chart.value)

  const option = {
    title: {
      // text: '水球图'-
    },
    yAxis: {
      show: false
    },
    xAxis: {
      show: false
    },
    series: [
      {
        type: 'liquidFill',
        radius: '90%',
        waveAnimation: true,
        animationDuration: 0,
        animationDurationUpdate: 0,
        data: [0.5, 0.4],
        backgroundStyle: {
          color: 'none'
        },
        outline: {
          borderDistance: 5,
          itemStyle: {
            borderWidth: 5,
            borderColor: '#1ec7d6',
            shadowBlur: 0,
            shadowColor: 'rgba(255, 0, 0, 1)'
          }
        },
        label: {
          position: ['50%', '30%'],
          formatter: function () {
            return '预销量'
          },
          fontSize: 15,
          color: '#fcfcfc'
        }
      }
    ]
  }

  myEcharts.setOption(option)
})
</script>

<template>
  <div
    class="container"
    :style="{ height: isNaN(+height) ? height : height + 'px' }"
  >
    <div class="titleBox">
      <div class="title">
        实时游客统计
        <div class="titleBg">&nbsp;</div>
      </div>
      <div class="title2"> 可预约总量999999人 </div>
    </div>
    <div class="contentBox">
      <div class="other">
        <div
          class="item"
          v-for="(item, index) in otherText"
          :key="index"
        >
          <div class="text">{{ item }}</div>
        </div>
      </div>
      <div
        class="chart"
        ref="chart"
      ></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  background-color: red;
  background: url(../../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 100%;
  color: white;

  $boxHeight: 14%;
  .titleBox {
    position: relative;
    width: 100%;
    height: $boxHeight;

    .title {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;

      .titleBg {
        margin-top: 10px;
        background: url(../../../images/dataScreen-title.png) no-repeat;
      }
    }

    .title2 {
      position: absolute;
      right: 5px;
      bottom: 0;
    }
  }

  .contentBox {
    position: relative;
    width: 100%;
    height: calc(100% - $boxHeight);
    padding: 20px;
    padding-bottom: 0;

    .other {
      width: 100%;
      height: 20%;
      display: flex;

      .item {
        position: relative;
        width: calc(100% / 7);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(../../../images/total.png) no-repeat;
        background-size: 100% 100%;

        .text {
          font-size: 30px;
        }
      }
    }
    .chart {
      width: 100%;
      height: 80%;
    }
  }
}
</style>
